<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Filter</title>
</head>
<body>
    <div data-ng-app="myApp" data-ng-controller="myCtrl">
        <h3>大小写过滤</h3>
        <p>
            <span>原字符串：{{upLow}}</span><br />
            <span>大写过滤：{{upLow|uppercase}}</span><br />
            <span>小写过滤：{{upLow|lowercase}}</span><br />
        </p>
        <h3>截取字符</h3>
        <p>
            <span>原字符串：{{upLow}}</span><br />
            <span>截取前6位：{{upLow|limitTo:6}}</span><br />
            <span>截取后4位：{{upLow|limitTo:-4}}</span><br />
        </p>
        <h3>货币格式化</h3>
        <p>
            <span>原值：{{price}}</span><br />
            <span>默认：{{price|currency}}</span><br />
            <span>自定义：{{price|currency:'￥'}}</span><br />
        </p>
        <h3>timeStamp格式化</h3>
        <p>
            <span>原值：{{timeStamp}}</span><br />
            <span>转换：{{timeStamp|date:'yyyy-MM-dd HH:mm:ss'}}</span><br />
        </p>
        <h3>数字格式化</h3>
        <p>
            <span>原值：{{price}}</span><br />
            <span>保留两位小数：{{price|number:2}}</span><br />
            <span>保留三位小数：{{price|number:3}}</span><br />
        </p>
        <h3>排序查找</h3>
        <span>原序列</span>
        <ul>
            <li data-ng-repeat="x in names">{{x.name + ',' + x.country}}</li>
        </ul>
        
        <span>按country升序排序</span>
        <ul>
            <li data-ng-repeat="x in names|orderBy:'country'">{{x.name + ',' + x.country}}</li>
        </ul>
        <span>按country降序排序</span>
        <ul>
            <li data-ng-repeat="x in names|orderBy:'country':true">{{x.name + ',' + x.country}}</li>
        </ul>
        <h3>过滤输入</h3>
        <input type="text" placeholder="输入过滤词" data-ng-model="filterKey" />
        <ul>
            <li data-ng-repeat="x in names|filter:filterKey">{{x.name + ',' + x.country}}</li>
        </ul>
        <span>查找名字为Jani的记录</span>
        <ul>
            <li data-ng-repeat="x in names|filter:{name:'Jani'}">{{x.name + ',' + x.country}}</li>
        </ul>
        <h3>自定义过滤(翻转文字)</h3>
        <p>
            <span>原值：{{msg}}</span><br />
            <span>翻转：{{msg|reverse}}</span>
        </p>
           
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="filter.js"></script>
</body>
</html>